<!--
 * @Author: your name
 * @Date: 2020-07-28 21:27:28
 * @LastEditTime: 2020-08-09 19:05:56
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \H52002-VueMobile-accp\honeybud\src\views\Register.vue
-->
<template>
  <div class="register">
    <router-link to="/Longin">
        <van-nav-bar  left-arrow  />
    </router-link>
    <h1>注册</h1>
    <van-form >
      <!-- 用户名 -->
      <van-field
        v-model="user.username"
        name="用户名"
        placeholder="请输入用户名,4到16位（字母，数字，下划线，减号）"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <!-- 密码 -->
      <van-field
        v-model="user.password"
        name="密码"
        placeholder="请输入密码，8-14为需含大小写英文字母和数字"
         :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" @click="handleReg">注册</van-button>
      </div>
    </van-form>
    <p>继续注册表示已经阅读并同意<span>《用户协议和隐私策略》</span></p>
  </div>
</template>

<script>
import {userReg} from "../api/userApi"

export default {
  data() {
    return {
        user:{
          username: "",
          password: "",
        }
    };
  },
  methods: {
    async handleReg(){
      let res = await userReg(this.user)
      console.log(res);
  }
}
}
</script>

<style lang="stylus" scoped>
h1 {
  font-size: 25px;
  position: relative;
  line-height: 80px;
  left: 20px;
}
p{
    text-align center
    color #8b8b8b
}
p span {
    color red
}
</style>